<!-- 
  @name: 加注机选择列表
  @date: 2020.3.19
 -->
<template>
	<view class="content">
		<view
			class="item"
			v-for="(item, index) in lists"
			:key="item.machineId">
			<view class="name">{{item.macName}}</view>
			<view class="check_box">
				<view :class="item.machineId === machineId ? '_ck1' : '_ck2'" @tap="clickMac(item, index)"></view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
		
		<!-- 底部区域 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view">
			<button class="btn_submit" @tap="submit">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //列表
				page: 1,  //页码
				machineId: '',  //选中的机器id
				macName: '',  //选中的机器名称
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				this.machineId = '';
				this.macName = '';
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//确定
			submit() {
				if(!this.macName) {
					this.$showToast('请选择加注机！');
					return;
				}
				uni.$emit('common_chooseMac', {
					macName: this.macName,
					machineId: this.machineId
				});
				uni.navigateBack({
					delta: 1
				});
			},
			//点击加注机
			clickMac(item, index) {
				this.machineId = item.machineId;
				this.macName = item.macName;
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.siteUrl + 'getfillsitepage',
					data: {
						page: this.page,
						rows: this.$tmp.ROWS_RET
					}
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						arr.forEach(item => {
							if(item.lstFillMachine && item.lstFillMachine.length > 0) {
								this.lists = this.lists.concat(item.lstFillMachine);
							}
						});
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	.content {
		padding-top: 12rpx;
		padding-left: 40rpx;
		padding-right: 50rpx;
		padding-bottom: 50rpx;
		overflow-x: hidden;
	}
	.item {
		width: 100%;
		padding: 36rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		.name {
			flex: 1;
		}
	}
</style>
